<!--
 * @Author: lixb
 * @Date: 2020-08-24 15:36:05
 * @LastEditTime: 2020-09-18 19:23:56
 * @Descripttion: 企业微信授权页面
-->
<template>
  <div class="app-container">
    <el-card class="box-card first-step">
      <p class="step">第一步</p>
      <p><img src="@/assets/img/weChat.png" style="width: 30px;height: 30px;" /></p>
      <div class="text1">
        {{ isAuthorization ? `绑定企业【${enterpriseName}】` : '企业微信绑定' }}
      </div>
      <el-button class="first-button" type="primary" @click="showTwoCode">
        {{ isAuthorization ? '重新授权绑定' : '马上授权绑定' }}
      </el-button>
    </el-card>
    <el-card class="box-card">
      <div class="step">第二步</div>
      <div class="text2">组织架构同步</div>
      <el-button
        :style="{ 'margin-top': isAuthorization ? '10px' : '48px' }"
        type="primary"
        :disabled="!authorizationStatus"
      >
        马上同步
      </el-button>
      <div v-if="isAuthorization">
        <el-divider></el-divider>
        <div style="color: #7F848B;font-size: 12px;">最后一次完成同步操作：2020-07-07 10:00:00</div>
      </div>
    </el-card>
    <!-- 二维码弹窗 -->
    <el-dialog
      title="企业微信扫码登录"
      :visible.sync="twoCodeVisible"
      :close-on-click-modal="false"
      width="300px"
      center
    >
      <div v-if="showHaveInHand" class="code-text">组织架构同步中…</div>
      <img src="@/assets/img/code.png" />
      <el-divider></el-divider>

      <div style="text-align: center;">
        请以管理员身份登录企业微信，在企业微信中扫码授权并安装“薪消费”。
      </div>
    </el-dialog>
    <!-- 未认证提示 -->
    <el-dialog title="提示" :visible.sync="hasAuthVisible" width="30%">
      <span>您的企业未通过认证，目前无法操作！</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="goAuthentication()">去认证</el-button>
        <el-button type="primary" @click="hasAuthVisible = false">确定</el-button>
      </span>
    </el-dialog>
    <!-- 应用列表 -->
    <el-dialog
      title="请选择需要安装的应用"
      center
      :visible.sync="applicationListVisible"
      width="50%"
    >
      <p style="color:#7F848B;margin-bottom: 30px;font-size: 14px;">
        • 请选择任一应用进行同步架构数据，如需安装多个应用，可移步微信应用市场进行安装即可。
      </p>
      <Table
        :table-data="tableData"
        :prop-data="propData"
        border
        :is-radio-table="true"
        :is-show-selection="true"
        :paging-data="pagingData"
        @selectionChange="selectionChange"
        @getTableList="getTableList"
      >
        <template slot="img">
          <el-table-column prop="applicationLogo" label="应用Logo">
            <template slot-scope="scope">
              <img :src="scope.row.applicationLogo" style="width: 30px;height: 30px;" />
            </template>
          </el-table-column>
        </template>
      </Table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="applicationListVisible = false">取消</el-button>
        <el-button type="primary" :disabled="applicationId == ''" @click="nextStep()">
          下一步
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import Table from '@/components/Table';
  import { hasAuthOrg } from '@/api/organization';
  import {
    queryCorporateWeChatApplicationList,
    queryCorporateWeChatSynchronizationStatus,
  } from '@/api/thirds';

  export default {
    components: { Table },
    data() {
      return {
        showHaveInHand: false,
        hasAuthVisible: false,
        authorizationStatus: false,
        isShow: false,
        applicationId: '',
        isAuthorization: false, //绑定状态 true为已绑定
        enterpriseName: '深圳市安徽尚礼科技有限公司', //企业名称
        twoCodeVisible: false,
        timer: null,
        applicationListVisible: false,
        tableData: [],
        propData: [
          {
            label: '应用ID',
            prop: 'applicationId',
          },
          {
            label: '应用名称',
            prop: 'applicationName',
          },
          {
            label: '应用图标',
            prop: 'applicationLogo',
            type: 'img',
          },
        ],
        pagingData: {
          current: 1,
          size: 10,
          total: 0,
        },
      };
    },

    computed: {
      ...mapGetters('user', ['userInfo']),
    },
    watch: {
      twoCodeVisible(a) {
        if (a) {
          setTimeout(() => {
            this.showHaveInHand = true;
          }, 10000);
          this.timer = setInterval(() => {
            let params = {
              applicationId: this.applicationId,
              organizationId: this.userInfo.organId,
            };
            queryCorporateWeChatSynchronizationStatus(params).then(res => {
              console.log(res.data);
              if (res.data) {
                window.clearInterval(this.timer);
                this.twoCodeVisible = false;
              }
            });
          }, 5000);
        } else {
          window.clearInterval(this.timer);
        }
      },
    },
    // watch: {},
    // mounted() {},
    methods: {
      showTwoCode() {
        hasAuthOrg(this.userInfo.organId).then(res => {
          if (res.status == 200) {
            if (res.data) {
              this.applicationListVisible = true;
              this.applicationId = '';
              this.getTableList();
            } else {
              this.hasAuthVisible = true;
            }
          }
        });
      },
      getTableList() {
        let params = {
          size: this.pagingData.size,
          current: this.pagingData.current,
        };
        queryCorporateWeChatApplicationList(params).then(res => {
          console.log(res);
          this.tableData = res.data.records;
        });
      },
      selectionChange(val) {
        console.log(val[0]['applicationId'], '外面的');
        this.applicationId = val[0]['applicationId'];
      },
      nextStep() {
        console.log(this.applicationId, '参数');
        this.applicationListVisible = false;
        this.twoCodeVisible = true;
      },
      goAuthentication() {
        this.hasAuthVisible = false;
        this.$router.push('/organization');
      },
    },
  };
</script>

<style lang="scss" scoped>
  .box-card {
    width: 312px;
    height: 202px;
    background: url('~@/assets/img/dd&weChatbgm.png');
    display: inline-block;
    margin-right: 30px;
    text-align: center;
    .text1 {
      color: #7f848b;
    }
    .text2 {
      color: #7f848b;
      margin-top: 30px;
    }
    .first-button {
      margin-top: 15px;
    }
    .step {
      font-size: 16px;
      font-weight: bold;
      margin: auto;
    }
  }
  // .wrap-box {
  //   border: 1px solid red;
  // }
  .code-text {
    width: 250px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 20px;
    color: white;
    position: absolute;
    top: 165px;
    background: rgba(19, 18, 18, 0.5);
  }
  img {
    margin: auto;
    width: 250px;
    height: 250px;
  }
</style>
